<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 绑定示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        const { createApp, ref } = Vue

        createApp({
            setup() {
                // 复制VueBindExample.vue中的逻辑
                const message = ref('Hello World!')
                const isRed = ref(true)
                const color = ref('green')

                function toggleRed() {
                    isRed.value = !isRed.value
                }

                function toggleColor() {
                    color.value = color.value === 'green' ? 'blue' : 'green'
                }

                return {
                    message,
                    isRed,
                    color,
                    toggleRed,
                    toggleColor
                }
            },
            template: `
                <div>
                    <p>
                        <span :title="message">
                            鼠标悬停几秒查看动态绑定的标题！
                        </span>
                    </p>

                    <p :class="{ red: isRed }" @click="toggleRed">
                        这应该是红色的... 点击我切换状态。
                    </p>

                    <p :style="{ color }" @click="toggleColor">
                        这应该是绿色的，点击我在绿色和蓝色之间切换。
                    </p>
                </div>
            `
        }).mount('#app')
    </script>

    <style>
        .red {
            color: red;
        }
    </style>
</body>
</html>